<route lang="json5" type="page" needLogin="false">
{
  style: {
    navigationBarTitleText: '已发布',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden bg-#f6f6f6 min-h-100vh">
    <view
      class="bg-#fff p-20rpx w-100% box-border mt-20rpx"
      v-for="item in cuisineList"
      :key="item"
    >
      <wd-row gutter="10">
        <wd-col :span="10">
          <view class="w-250rpx h-250rpx">
            <image
              class="w-100% h-100% border-rd-12rpx"
              :src="item.coverPhotoUrl"
              @click="handleDetail(item.id)"
            ></image>
          </view>
        </wd-col>
        <wd-col :span="14">
          <view class="flex my-10rpx" style="flex-wrap: wrap; align-items: center; height: 230rpx">
            <view class="ellipsis title" style="width: 100%" @click="handleDetail(item.id)">
              {{ item.storeName }}
            </view>
            <view class="per-money mr-8rpx">￥{{ item.consumption }}/人</view>
            <view class="flex" style="flex-wrap: wrap; width: 100%" @click="handleDetail(item.id)">
              <view class="mr-8rpx" v-for="(tag, index) in item.storeLabel" :key="index">
                <wd-tag
                  color="#AD0E0E"
                  bg-color="#AD0E0E"
                  plain
                  style="width: 100rpx; text-align: center"
                >
                  {{ tag }}
                </wd-tag>
              </view>
            </view>
            <view class="flex items-center" style="margin-left: auto">
              <view
                class="bg-#eee py-6rpx px-18rpx text-#101010 border-rd-8rpx text-22rpx mr-16rpx"
                @click="handleEdit(item)"
              >
                编辑
              </view>
              <view
                class="bg-#eee py-6rpx px-18rpx text-#101010 border-rd-8rpx text-22rpx"
                @click="handleDelete(item.id)"
              >
                删除
              </view>
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore v-if="cuisineList.length > 0" :state="state" @reload="loadmore" />
  </view>

  <wd-fab type="warning" position="right-bottom" :draggable="true">
    <wd-button @click="addCuisine" type="primary" round>新建美食</wd-button>
  </wd-fab>
</template>

<script lang="ts" setup>
import { deleteCuisine, getCuisinePage } from '@/service/TouristManagement/MyCuisine'
import { useUserStore } from '@/store'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
const userStore = useUserStore()
const userId = computed(() => userStore.userInfo.userId)

const cuisineList = ref([])
const cuisine = reactive({
  pageNo: 1,
  pageSize: 10,
  status: 2,
})
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getCuisineList()
  }, 1000)
}
onReachBottom(() => {
  if (cuisineList.value.length === max.value) {
    state.value = 'finished'
  } else if (cuisineList.value.length < max.value) {
    cuisine.pageNo += 1
    loadmore()
  }
})

// 获取美食列表
async function getCuisineList() {
  const data: any = await getCuisinePage({ ...cuisine }, { UserId: userId.value })
  cuisineList.value.push(...data.data.list)
  cuisineList.value = cuisineList.value.map((item) => {
    item.fileDOList = item.fileDOList.reverse()
    const fileUrl =
      item.fileDOList && item.fileDOList.length > 0 && item.fileDOList[0].url
        ? item.fileDOList[0].url
        : null
    let storeLabel
    if (typeof item.storeLabel === 'string') {
      storeLabel = item.storeLabel.split(',')
    } else if (Array.isArray(item.storeLabel)) {
      storeLabel = item.storeLabel
    } else {
      storeLabel = []
    }
    return {
      ...item,
      storeLabel,
      coverPhotoUrl: fileUrl ? baseurl.value + fileUrl : null,
    }
  })
  max.value = data.data.total
  cuisineList.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
}

// 删除美食
async function handleDelete(id) {
  const params = {
    ids: id,
    typeStr: '美食',
  }
  uni.showModal({
    title: '提示',
    content: '您确定要删除这个美食吗？',
    success: async (res) => {
      if (res.confirm) {
        // 用户点击确定
        const data = await deleteCuisine({ ...params })
        if (data.data) {
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000,
          })
          handleQuery()
        } else {
          uni.showToast({
            title: '删除失败',
            icon: 'none',
            duration: 2000,
          })
        }
      } else if (res.cancel) {
        uni.showToast({
          title: '已取消删除',
          icon: 'none',
          duration: 2000,
        })
      }
    },
  })
}
/** 查询按钮操作 */
const handleQuery = () => {
  cuisine.pageNo = 1
  cuisineList.value = []
  max.value = 60
  getCuisineList()
}
// 编辑
const handleEdit = (item) => {
  const itemString = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/pages/TouristManagement/MyCuisine/addCuisine?data= ${itemString}&type=${'edit'}`,
  })
}
const addCuisine = () => {
  uni.navigateTo({ url: '/pages/TouristManagement/MyCuisine/addCuisine?type=' + 'add' })
}
const handleDetail = (id) => {
  uni.navigateTo({ url: '/pages/TouristManagement/MyCuisine/cuisineDetail?id=' + id })
}
onMounted(() => {
  cuisine.status = 2
  cuisineList.value = []
  getCuisineList()
})
</script>
<style lang="scss" scoped>
.title {
  color: rgb(16, 16, 16);
  font-size: 36rpx;
  text-align: justify;
  font-weight: 500;
}
.per-money {
  color: #101010;
  font-size: 26rpx;
  text-align: left;
  font-weight: 500;
  vertical-align: bottom;
  margin-left: -2rpx;
}
</style>
